import {Component, OnInit} from '@angular/core';
import * as echarts from "echarts";
import {NzMessageService} from "ng-zorro-antd";
import {FetchService} from "../../../core/net/fetch.service";

@Component({
  selector: 'app-ira-right-panel',
  templateUrl: './ira-right-panel.component.html',
  styleUrls: ['./ira-right-panel.component.scss']
})
export class IraRightPanelComponent implements OnInit {

  visible = true;
  count = 0;
  pieOpt: any = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    series: [
      {
        type: 'pie',
        radius: [0, 80],
        center: ['50%', '60%'],
        roseType: 'rose',
        label: {
          normal: {
            formatter: '{b|{b}}\n({c}亿m³) {per|{d}%}',
            color: '#4CC5F8',
            position: 'outer',
            alignTo: 'edge',
            margin: '3%',
            rich: {
              b: {
                color: '#0DC9DC',
                fontSize: 12,
                lineHeight: 18,
                align: 'center'
              },
              c: {
                color: '#ffffff'
              },
              per: {
                color: '#4CC5F8',
                padding: [2, 4],
                borderRadius: 4
              }
            }
          }
        },
        itemStyle: {
          normal: {
            color: (params) => {
              const colorList = [
                ['#EED2EE', '#E066FF', '#CD00CD'],
                ['#63D360', '#089C04', '#1FCD1B'],
                ['#87CEFF', '#4F94CD', '#1C86EE'],
                ['#4CC5F8', '#56E8F2', '#84F5DE']
              ];
              return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {offset: 0, color: colorList[params.dataIndex][0]},
                {offset: 0.5, color: colorList[params.dataIndex][1]},
                {offset: 1, color: colorList[params.dataIndex][2]}
              ]);
            }
          }
        },
        data: [

          {value: 0.37, name: '生活用水'},
          {value: 1.51, name: ' 工业用水'},
          {value: 3.51, name: '生态用水'},
          {value: 7.51, name: '农业用水'}
        ]
      }
    ]
  };
  chartMergeOpt;

  chart2Opt = {
    title: {
      text: '',
      subtext: ''
    },
    tooltip: {
      trigger: 'item'  // 悬浮提示框不显示
    },
    grid: {   // 绘图区调整
      left: '40',  // grid 组件离容器左侧的距离,
      // left的值可以是80这样具体像素值，
      // 也可以是'80%'这样相对于容器高度的百分比
      top: '10',
      right: '10',
      bottom: '10',
      containLabel: true   // gid区域是否包含坐标轴的刻度标签。为true的时候，
    },
    xAxis: {
      type: 'value', // 坐标轴类型,分别有：
      // 'value'-数值轴；'category'-类目轴;
      // 'time'-时间轴;'log'-对数轴
      splitLine: {show: false}, // 坐标轴在 grid 区域中的分隔线
      axisLabel: {show: false}, // 坐标轴刻度标签
      axisTick: {show: false}, // 坐标轴刻度
      axisLine: {show: false}, // 坐标轴轴线
    },
    yAxis: {
      type: 'category',
      data: ['生态', '农村人畜', '城镇生活', '工业', '农业'],
      axisLine: {show: false},     // 坐标轴
      axisTick: {    // 坐标轴小标记
        show: false
      },
      axisLabel: {
        textStyle: {
          fontSize: '12',
          color: '#ffffff'
        }
      }
    },
    series: [
      {
        name: '%', // 系列名称
        type: 'bar', // 柱状、条形图
        barWidth: 12, // 柱条的宽度,默认自适应
        data: [20, 40, 60, 50, 55], // 系列中数据内容数组
        itemStyle: {// 图形样式
          normal: {  // normal 图形在默认状态下的样式;
            // emphasis图形在高亮状态下的样式
            barBorderRadius: 10, // 柱条圆角半径,单位px.
            // 此处统一设置4个角的圆角大小;
            // 也可以分开设置[10,10,10,10]顺时针左上、右上、右下、左下
            color: new echarts.graphic.LinearGradient(
              0, 0, 1, 0,
              [{
                offset: 0,
                color: '#22B6ED'
              },
                {
                  offset: 1,
                  color: '#3FE279'
                }
              ]
            )
          }
        },
        zlevel: 1// 柱状图所有图形的 zlevel 值,
      },
      {
        name: '进度条背景',
        type: 'bar',
        barGap: '-100%', // 不同系列的柱间距离，为百分比。
        barWidth: 12,
        data: [100, 100, 100, 100, 100],
        color: '#6497AC', // 柱条颜色
        itemStyle: {
          normal: {
            barBorderRadius: 10
          }
        },
        label: { // 图形上的文本标签
          show: true,
          position: 'insideRight', // 标签的位置
          color: '#ffffff', // 标签字体颜色
          fontSize: 10,  // 标签字号
          formatter: (params) => {
            const arr = [20, 40, 60, 50, 55];
            return '已使用' + arr[params.dataIndex] * 100 / params.data  + '%';
          }
        },
      }

    ]
  };

  jrsqData = [];
  ggjdData = {};
  waterData = {};

  constructor(
    private message: NzMessageService,
    private fetchService: FetchService
  ) {
  }

  ngOnInit(): void {
    this.queryInfo();
  }

  btnToggle(): void {
    this.count++;
    this.visible = !this.visible;
  }


  queryInfo(): void {
    // 今日水情
    this.fetchService.post<any>('muw/wrsMuwWatReg/list', {}).subscribe(res => {
      this.jrsqData = res;
    });

    // 灌溉进度
    this.fetchService.post<any>('muw/wrsMuwIrrData/statisticArea', {}).subscribe(res => {
      res.map(item => {
        this.ggjdData[item.name] = item.val;
      });
    });

    // 引水量
    this.fetchService.post<any>('muw/wrsMuwIrrData/statisticWater', {}).subscribe(res => {
      console.log(res);
      this.waterData = res;
    });
  }
}
